<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			b ody{
				width: 100%;
				height: 10000px;
				background-image: url(img/蜡笔小新.png);
				background-size: cantain;
				/*函数 cover 等比例放大图片   特点：原图按比例放大存背景空间
				【开发者：背景图大小是否等于背景空间】
				      contain 等比例缩放图片 特点：图片按比例缩放存背景空间
				【开发者：背景图等比例显示在背景空间】	  
				;*/
				/*背景附件--尺寸中存在cover或者contain*/
				background-attachment: fixed;/*固定 fixed 不固定 scroll*/
			}
			div{
				width: 300px;
				height: 300px;
				background-color: #e4393c;
				background: #fff000;
				background-image: url("img/蜡笔小新.png");
				/*问题   超大图--不显示   小图--显示
				注意空间大小 如果图小于背景空间--平铺
				*/
			   background-repeat: no-repeat;
			   /*no-repeat不平铺 注意：repeat-x,y 横，纵向平铺*/
			   background-size: 30%;
			   /*背景尺寸属性值：数值px % | 函数 cover contain*/
			   /*背景定位：背景空间大于背景图  关键字 center left right top*/
			   background-position: 80% 0;
			}
		</style>
	</head>
	<body>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sunt, doloremque amet voluptatibus rerum inventore maxime nam maiores voluptatem sapiente labore deserunt facilis ex quia tempora obcaecati aliquid voluptate porro!
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga magni earum repellat, soluta ipsum illum, eum quasi eius quisquam asperiores voluptatibus error sequi pariatur nostrum culpa sit eos a dolores!
		Lorem ipsum dolor sit amet,consectetur adipisicing elit. Harum eos beatae consequatur porro saepe? Aperiam, eum. Porro, explicabo iure dicta illo id, sint sunt quia, quod nam at aperiam reiciendis!
	    <!--html img图片  引入一张图片 位置不可随意改变   
		    CSS  背景图片  引入一张图片  位置可以随意改变 
			子属性 background-color 背景颜色
			      background-image 背景图
				  background-repeat 背景重复
				  background-size 背景尺寸
				  background-attachment 背景附件
				  background-position 背景定位
			复合属性 background:background-image  background-color background-position
				    background-size background-attachment和background-repeat
			简写属性：background:background-image background-position/background-size background-repeat
			代替子属性:background-image background-color background-repeat
			 -->
			 <div></div>
	</body>
</html>